<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head th:replace="admin/_fragments::head">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
    <link rel="stylesheet" href="../../static/css/semantic.min.css">
    <link rel="stylesheet" href="../../static/css/me.css">
    <title>Life Show后台</title>
</head>
<body>

<div id="contentWrap">
    <div th:replace="admin/_fragments::navbar(4)">
        <!--sidebar-->
        <div class="ui sidebar vertical left menu overlay borderless visible sidemunu inverted grey"
             style="max-width: 250px !important;" tabindex="0">
            <a href="#" class="item logo">
                <img src="../../static/images/logo.png" alt="admin logo">
            </a>
            <div class="ui accordion inverted">
                <a class="title item m-padded">
                    <i class="compass outline icon titleIcon"></i>
                    <p>首页</p>
                </a>
                <a class="title item m-padded">
                    <i class="video icon titleIcon"></i>
                    <p>短视频管理</p>
                </a>
                <a class="title item m-padded">
                    <i class="user icon titleIcon"></i>
                    <p>用户管理</p>
                </a>
                <a class="title item m-padded">
                    <i class="music icon titleIcon"></i>
                    <p>背景音乐管理</p>
                </a>
                <a class="title item m-padded">
                    <i class="tags icon titleIcon"></i>
                    <p>热门活动管理</p>
                </a>
                <div class="title item m-padded toggle">
                    <i class="bell icon titleIcon"></i>
                    举报模块
                    <i class="dropdown icon" style="float: right !important;"></i>
                    <div class="ui red horizontal label">99+</div>
                </div>
                <div class="ui menu inverted m-item m-display-hide" style="border-radius: 0 !important;" tabindex="0">
                    <div class="ui fluid dropdown item" style="font-size: 14px !important;">
                        <a class="item" href="#">
                            <i class="lock open icon"
                               style="font-size: 12px !important;float: left !important;margin-right: 5px !important;"></i>
                            举报列表
                        </a>
                        <a class="item" href="#">
                            <i class="lock icon"
                               style="font-size: 12px !important;float: left !important;margin-right: 5px !important;"></i>
                            封禁列表
                        </a>
                    </div>
                </div>
                <div class="ui divider"></div>
                <a class="title item m-padded">
                    <i class="users icon titleIcon"></i>
                    <p>管理员管理</p>
                </a>
            </div>
        </div>

        <!--navbar-->
        <div class="navslide ui menu">
            <div class="right menu">
                <div class="ui dropdown item">
                    <i class="user circle icon"></i>
                    <span>admin</span> <i class="dropdown icon"></i>
                    <div class="menu">
                        <p class="item">超级管理员</p>
                    </div>
                </div>
            </div>
            <a class="item labeled">
                <i class="power icon"></i>注销
            </a>
        </div>
    </div>

    <div class="m-padded-none m-container-content-sp">
        <!--搜索-->
        <div class="ui horizontal segments inline form">
            <input type="hidden" name="page">
            <div class="ui segment">
                <div class="ui fields m-margin-tb-none">
                    <div class="field">
                        <div class="ui input">
                            <input type="text" name="bgm" placeholder="背景音乐名">
                        </div>
                    </div>
                    <div class="field">
                        <button class="ui basic button" id="clear-btn">清空</button>
                    </div>
                    <div class="field">
                        <button class="ui teal basic button" id="search-btn"><i class="search icon"></i>搜索</button>
                    </div>
                </div>
            </div>


            <div class="ui right aligned segment">
                <a class="ui teal basic button" href="#" th:href="@{/admin/bgm/download}"><i class="upload icon"></i>添加新音乐</a>
            </div>
        </div>

        <div class="ui teal message" th:unless="${#strings.isEmpty(message)}">
            <i class="close icon"></i>
            <div class="header" th:text="${message}">
                状态消息
            </div>
        </div>

        <!--背景音乐列表-->
        <div id="table-container">
            <table th:fragment="bgmList" class="ui fixed single line celled teal table">
                <thead>
                <tr>
                    <th>#</th>
                    <th colspan="3">背景音乐名</th>
                    <th colspan="3">演唱者</th>
                    <th>封面图</th>
                    <th>时长（s）</th>
                    <th colspan="2">操作</th>
                </tr>
                </thead>
                <tbody>
                <tr th:each="bgm:${page.records}" th:if="${bgm.id}>1">
                    <td th:text="${bgm.id}">1</td>
                    <td th:attr="data-content=${bgm.bgmName}" th:text="${bgm.bgmName}" colspan="3">音乐名</td>
                    <td th:attr="data-content=${bgm.singer}" colspan="3"><span th:text="${bgm.singer}">演唱者</span></td>
                    <td>
                        <img src="../../static/images/leaves-pattern.png" alt="" class="ui avatar image"
                             th:src="@{${bgm.bgmCover}}">
                        <div class="ui flowing popup top left transition hidden">
                            <img src="../../static/images/leaves-pattern.png" alt="" th:src="@{${bgm.bgmCover}}">
                        </div>
                    </td>
                    <td th:text="${bgm.bgmSeconds/1000}"></td>
                    <td colspan="2" class="m-overflow-visited">
                        <a href="javascript:void(0);" class="ui icon mini blue button audi"
                           th:attr="data-mid=${bgm.mid},data-name=${bgm.bgmName},data-cover=${bgm.bgmCover}" onclick="audi(this)">试听(在线)&nbsp;&nbsp;<i
                                class="play circle outline icon"></i></a>
                        <a href="javascript:void(0);" th:attr="data-path=${bgm.bgmPath},data-id=${bgm.id}" onclick="edit(this)"
                           class="ui icon mini green button edit">剪切&nbsp;&nbsp;<i
                                class="edit circle outline icon"></i></a>
                        <div class="ui dropdown item mini button"
                             style="padding-left: 10px !important;padding-right: 10px !important;">
                            更多
                            <i class="dropdown icon"></i>
                            <div class="menu">
                                <a href="javascript:void(0);" class="item"
                                   th:href="@{/admin/bgm/delete/{id}(id=${bgm.id})}">删除</a>
                            </div>
                        </div>
                    </td>
                </tr>
                </tbody>
                <tfoot>
                <tr>
                    <th colspan="11">
                        <div class="ui mini pagination menu" th:if="${page.pages}>1">
                            <a href="#" class="icon item" onclick="page(this)"
                               th:attr="data-pages=${page.current}-1"
                               th:unless="${page.current}==1"><i class="angle double left icon"></i>&nbsp;&nbsp;&nbsp;上一页
                            </a>
                            <a href="#" class="icon item" onclick="page(this)"
                               th:attr="data-pages=${page.current}+1"
                               th:unless="${page.current==page.pages}">下一页&nbsp;&nbsp;&nbsp;<i
                                    class="angle double right icon"></i>
                            </a>
                        </div>
                    </th>
                </tr>
                </tfoot>
            </table>
            <script>
            </script>
        </div>
    </div>
</div>

<div class="ui modal" style="width: 1000px;height: 430px;">
    <div class="header">
        音频剪切（本地）
    </div>
    <div class="content">
        <div class="description">
            <div id="waveform"></div>
        </div>
        <br>
        <div class="control">
            <button class="ui primary button play">播放/暂停</button>
            <button class="ui button stop">停止</button>
            <button class="ui button region">播放选定区域</button>
        </div>
        <br>
        <div class="tip">
            <div class="ui bulleted list">
                <div class="item">在可视化音频谱上，拖动区域可选择需要剪切的部分</div>
                <div class="item">剪切的部分可在边缘使用鼠标拖动，改变区域大小</div>
                <div class="item">点击确定后，将会把本地原有音频覆盖，在线试听仍可试听完整音频</div>
                <div class="item">建议尽量将剪切后的音频时长限制在30s内，方便用户使用</div>
            </div>
        </div>
    </div>
    <div class="actions">
        <div class="ui cancel button">取消</div>
        <div class="ui ok button">确定</div>
    </div>
</div>

<!--音乐播放按扭开始-->
<div th:replace="admin/_fragments::music-con" class="MusicCon m-opacity-mini" style="z-index: 999 !important;">
    <div class='ImgTxt'>
        <dl>
            <dt style="margin-left: 5px">
                <a href="javascript:void(0)" class="play">
                    <img class="ui circular image butImg zqq" src="../../static/images/cd.jpg"
                         th:src="@{/images/cd.jpg}"
                         width='90' height='90'/>
                </a>
            </dt>
            <dd style="margin-top: -20px;height: 40px;padding-left: 8px;">
                <marquee scrollamount="2" direction="left" class="songname">
                    快去挑选一首歌开始试听吧~
                </marquee>
            </dd>
            <dd style="font-size: 15px;color: darkgray;padding-left: 8px;">
                <marquee scrollamount="2" direction="left" class="songsinger"></marquee>
            </dd>
        </dl>
    </div>

    <div class="But">
        <a href="#" class='play'></a>
    </div>

    <div class="clickBut"><img src="../../static/images/but.png" th:src="@{/images/but.png}"/></div>
</div>
<!--音乐播放按扭结束-->

<!--/*/<th:block th:replace="admin/_fragments::script">/*/-->
<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<script src="../../static/js/jquery-2.2.4.min.js"></script>
<script src="../../static/js/semantic.min.js"></script>
<!--/*/</th:block>/*/-->
<script src="//y.gtimg.cn/music/h5/player/player.js?max_age=2592000"></script>
<script src="../../static/js/player.js" th:src="@{/js/player.js}"></script>
<script src="../../static/js/wavesurfer.js" th:src="@{/js/wavesurfer.js}"></script>
<script src="../../static/js/wavesurfer.regions.min.js" th:src="@{/js/wavesurfer.regions.min.js}"></script>
<script>
    $('.menu .toggle').click(function () {
        $('.m-item').toggleClass("m-display-hide");
    });

    $('#clear-btn')
        .on('click', function () {
            $("[name='bgm']").val('');
        });

    $('.ui .dropdown').dropdown({
        on: "hover"
    });

    $('td').popup();

    $('.image').popup({
        inline: true
    });

    $('#search-btn').click(function () {
        $("[name='page']").val(1);
        loadData();
    });

    function page(obj) {
        $("[name='page']").val($(obj).data("pages"));
        loadData();
    }

    function loadData() {
        $("#table-container").load(/*[[@{/admin/bgm/search}]]*/"/admin/bgm/search", {
            bgm: $("[name='bgm']").val(),
            pages: $("[name='page']").val()
        }, function () {
            // rebind event
            $('.ui .dropdown').dropdown({
                on: "hover"
            });
            $('td').popup();

            $('.image').popup({
                inline: true
            });
            $('.ui.modal')
                .modal({
                    closable: false,
                    onDeny: function () {
                        currentRegion.remove();
                        wavesurfer.stop();
                        return true;
                    },
                    onApprove: function () {
                        var startTime = currentRegion.start;
                        var endTime = currentRegion.end;
                        if (endTime-startTime < 5){
                            alert("请选择大于5s的区域");
                            currentRegion.update({ start: 0,end:5 });
                            return false;
                        }
                        $.ajax({
                            type:'GET',
                            url: /*[[@{/admin/bgm/edit}]]*/"/admin/bgm/edit",
                            data:{
                                start:parseInt(startTime),
                                end:parseInt(endTime),
                                id:id
                            },
                            dataType: 'json'
                        });
                        wavesurfer.stop();
                        currentRegion.remove();
                    }
                })
                .modal('attach events', '.button.edit', 'show');
        });
    }

</script>
<script type="text/javascript">
    // wavesurfer.js
    var wavesurfer = WaveSurfer.create({
        container: '#waveform',
        waveColor: 'violet',
        progressColor: 'purple',
        plugins: [WaveSurfer.regions.create()]
    });

    var songSrc;
    var id;
    var currentRegion;

    $('.ui.modal')
        .modal({
            closable: false,
            onDeny: function () {
                currentRegion.remove();
                wavesurfer.stop();
                return true;
            },
            onApprove: function () {
                var startTime = currentRegion.start;
                var endTime = currentRegion.end;
                if (endTime-startTime < 5){
                    alert("请选择大于5s的区域");
                    currentRegion.update({ start: 0,end:5 });
                    return false;
                }
                $.ajax({
                    type:'GET',
                    url: /*[[@{/admin/bgm/edit}]]*/"/admin/bgm/edit",
                    data:{
                        start:parseInt(startTime),
                        end:parseInt(endTime),
                        id:id
                    },
                    dataType: 'json'
                });
                wavesurfer.stop();
                wavesurfer.empty();
                currentRegion.remove();
            }
        })
        .modal('attach events', '.button.edit', 'show');

    function edit(obj) {
        songSrc = $(obj).data("path");
        id = $(obj).data("id");
        wavesurfer.load(songSrc);
        currentRegion = wavesurfer.addRegion(
            {
                id:"currentRegion",
                start: 0,
                end: 5,
                loop: false,
                drag: true,
                resize: true,
                color: "hsla(400, 100%, 30%, 0.5)"
            }
        )
    }

    $('.button.play').on('click', function () {
        wavesurfer.playPause();
    });

    $('.button.stop').on('click', function () {
        wavesurfer.stop();
    });

    $('.button.region').on('click',function () {
        currentRegion.play();
    })
</script>
<script type="text/javascript">
    // 音乐播放器
    var mark = 0;
    var player = null;
    $(function () {
        $(".MusicCon").animate({width: "420px"}, 3000);
        player = new QMplayer({target: "web"});
    });

    $(".clickBut").click(function () {
        if (mark == 1) {
            stretchOut();
        } else {
            drawBack();
        }
    });

    function audi(obj) {
        var mid = $(obj).data("mid");
        var songname = $(obj).data("name");
        var singer = $(obj).parent().parent().find("td").eq(2).children().text();
        var cover = $(obj).data("cover")
        $('.butImg').attr("src", cover);
        $('.songname').html(songname);
        $('.songsinger').html("Singer: " + singer);
        player.loop = false;
        player.play(mid);
    }

    $("body").on('click', 'a.play', function () {
        $('a.play').addClass('pause');
        $('a.play').removeClass('play');
        player.play();
    });

    $("body").on('click', 'a.pause', function () {
        $('a.pause').addClass('play');
        $('a.pause').removeClass('pause');
        player.play();
    });

    function stretchOut() {
        $(".MusicCon").animate({width: "420px"}, 1000);
        mark = 0;
    }

    function drawBack() {
        $(".MusicCon").animate({width: "126px"}, 1000);
        mark = 1;
    }
</script>
</body>
</html>






































